<template>
  <view class="container">
    <view class="message-list">
      <view class="message-item">
        <view class="itme-left">
          <span>系统通知</span>
          <span>V3.0版本上线啦！点击下载</span>
        </view>
        <view class="item-right iconfont icon-arrow-right"></view>
      </view>
      <view class="message-item">
        <view class="itme-left">
          <span>系统通知</span>
          <span>V3.0版本上线啦！点击下载</span>
        </view>
        <view class="item-right iconfont icon-arrow-right"></view>
      </view>
      <view class="message-item">
        <view class="itme-left">
          <span>系统通知</span>
          <span>V3.0版本上线啦！点击下载</span>
        </view>
        <view class="item-right iconfont icon-arrow-right"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.message-list {
  margin-top: 20rpx;

  .message-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 128rpx;
    padding: 22rpx 34rpx;
    background-color: #fff;
    border: 2rpx solid #f7f8fe;

    .itme-left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      & span:last-child {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #999999;
      }
    }

    .itme-right {
      width: 30rpx;
      height: 30rpx;
    }
  }
}
</style>
